<template>

	<scroll-view class="child_class sticky" @scrolltolower="handleScrolltolower" :scroll-y="scrollY"
		@scroll="handleScroll">
		<view>
			<view class="child_class_heda " v-show="ishede" ref="heda" :class="isSticky?'sticky':''">
				<view class="child_class_type">
					<view :class="index==highlight.type.index?'highlight':''" v-for="(item,index) in typeList"
						:key="index" @click="handleCutType(index,'type')">{{item.name}}
					</view>
				</view>
				<view class="child_class_minor">
					<view>
						<view :class="-1==highlight.minor.index?'highlight':''" @click="handleCutType(-1,'minor')">
							全部
						</view>
					</view>
					<view>
						<view :class="index==highlight.minor.index?'highlight':''" v-for="(item,index) in smallClass"
							:key="index" @click="handleCutType(index,'minor')">{{item}}
						</view>
					</view>
				</view>

			</view>
			<view class="sticky heda_a" v-show="!ishede" ref="heda1" @click="aaa">
				{{typeList[highlight.type.index].name}} <text style="margin-left: 20rpx;"
					class="iconfont icon-xia"></text>
			</view>
			<view class="child_class_list">
				<cell v-for="(item,index) in list " :key="index" :item="item" @click_detals="handleDetals"></cell>
			</view>

		</view>
	</scroll-view>
</template>

<script>
	export default {
		comments: {
			cell: () => import('../../components/cell/cell.vue')
		},
		data() {
			return {
				smallClass: [],
				scrollY:true,
				time: false,
				list: [],
				total: 0,
				ishede: true,
				isSticky: false,
				hedaHeight: 0,
				heda1Height: 0,
				params: {
					start: 0,
					limit: 15,
					major: '', //大类别
					minor: '', //小类别
					gender: '',
					type: '',
				},
				major: '',
				highlight: {
					type: {
						index: 0,
					},
					minor: {
						index: -1
					}
				},
				typeList: [{
						name: '热门',
						key: 'hot'
					},
					{
						name: '新书',
						key: 'new'
					},
					{
						name: '好评',
						key: 'reputation'
					},
					{
						name: '完结',
						key: 'over'
					},
					{
						name: '包月',
						key: 'monthly'
					}
				]
			}
		},
		onLoad(option) {
			if (option.data) {
				let {
					gender,
					major
				} = JSON.parse(option.data)
				this.params.major = major
				this.params.gender = gender
				uni.setNavigationBarTitle({
					title: major
				})
				this.title = major
				this.getSmallClass(gender, major)
			}
		},
		methods: {
			aaa() {
				this.ishede = true;
				this.isSticky = true
				this.time = true
				setTimeout(() => this.time = false, 100)
			},
			handleScroll(e) {
				let scrollTop = e.detail.scrollTop.toFixed(0)
				if (this.time) return
				if (this.ishede) {
					if (scrollTop > this.hedaHeight) this.ishede = false
					return
				}
				uni.createSelectorQuery().select('.heda_a').boundingClientRect((data)=>{
					 this.heda1Height = data.height
				}).exec()
				if (scrollTop < this.heda1Height) this.ishede = true
			},
			handleDetals(data) {
				console.log(data)
				uni.navigateTo({
					url:"../details/details?data="+JSON.stringify(data)
				})
			},
			handleScrolltolower() {
				this.params.start += (this.params.limit - 1)
				this.getData()
			},
			getData() {
				this.params.type = this.typeList[this.highlight.type.index].key
				this.params.minor = this.smallClass[this.highlight.minor.index]
				this.$request({
					url: '/book/by-categories',
					method: 'GET',
					dataType: 'json',
					data: this.params
				}).then(res => {
					this.list.push(...res[1].data.books)
				})
			},
			handleCutType(index, type) {
				this.highlight[type].index = index
				this.list = []
				this.getData()
			},
			getSmallClass(gender, major) {
				this.$request({
					url: '/cats/lv2',
					dataType: 'json',
					method: 'GET'
				}).then(res => {
					let data = res[1].data[gender]
					this.smallClass = data.filter(item => item.major == major)[0].mins
					this.getData()
					uni.createSelectorQuery().select('.child_class_heda').boundingClientRect((data)=>{
						 this.hedaHeight = data.height+44
					}).exec()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.child_class {
		width: 100%;
		height: 100%;
		box-shadow: inset 0px 2px 0px #f0f0f0;
		// position: relative;

		&_heda {
			box-shadow: -1px 10px 6px #ccc;
		}

		.highlight {
			border-color: #4CD964 !important;
			color: #4CD964 !important;
			border-radius: 10rpx !important;
		}

		&_heda {
			padding: 40rpx 40rpx 0 40rpx;
			box-sizing: border-box;
		}

		.heda_a {
			text-align: center;
			color: #4CD964;
			padding: 20rpx;
		}

		.sticky {
			position: sticky;
			top: 0;
			background-color: #fff;
			z-index: 999;
		}

		&_type {
			overflow: hidden;

			&>view {
				float: left;
				width: max-content;
				padding: 8rpx 14rpx;
				margin-right: 36rpx;
				color: $uni-text-color;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				border: 2rpx solid #fff;
			}


		}

		&_minor {
			display: flex;

			&>view:first-child {
				overflow: hidden;

				&>view {
					width: max-content;
					padding: 8rpx 14rpx;
					margin-right: 36rpx;
					color: $uni-text-color;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					border: 2rpx solid #fff;
				}
			}

			&>view:last-child {
				flex: 1;
				overflow: hidden;

				&>view {
					float: left;
					width: max-content;
					padding: 8rpx 14rpx;
					margin-right: 36rpx;
					color: $uni-text-color;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					border: 2rpx solid #fff;
				}
			}
		}

		&_list {
			padding: 40rpx;
			background-color: #f7f7f7;
		}
	}
</style>
